import React, { useRef, forwardRef, useState } from 'react';
import { List, Button, Toast } from 'antd-mobile';
import { history } from 'umi';
import SelfHead from 'components/common/selfHead';
import CompProfile from './../components/compProfile';
import IndType from './../components/indType';
import CompTranCa from './../components/compTranCa';
import CompStorageCa from './../components/compStorageCa';
import CompConnInfo from './../components/compConnInfo';
import { addWlqy } from 'ser/actions';

import './index.less';

const CompProfileRef = forwardRef((props, ref) => (
  <CompProfile {...props} cRef={ref} />
));

const IndTypeRef = forwardRef((props, ref) => (
  <IndType {...props} cRef={ref} />
));

const CompTranCaRef = forwardRef((props, ref) => (
  <CompTranCa {...props} cRef={ref} />
));

const CompStorageCaRef = forwardRef((props, ref) => (
  <CompStorageCa {...props} cRef={ref} />
));

const CompConnInfoRef = forwardRef((props, ref) => (
  <CompConnInfo {...props} cRef={ref} />
));

// 物流企业填报
function LogiEntp({ form }) {
  const compProfileRef = useRef();
  const InduTypeRef = useRef();
  const compTranCaRef = useRef();
  const compStorageCaRef = useRef();
  const compConnInfoRef = useRef();
  const [flag, setFlag] = useState(false);
  async function submitData() {
    const {
      ownVehicle, // 自行车
      cooperativeVehicle, // 合作车
      transportCategory, // 运输类型
      coldTransportType, // 冷藏类型
      natTransportType, // 常温类型
      natVehicle, // 常温车
      coldVehicle, // 冷藏车
    } = compTranCaRef.current;
    const {
      totalArea, // 总面积
      storeCategory, // 仓储类型
      coldStoreType, // 冷藏类型
      natStoreType, // 常温类型
      coldArea, // 冷冻库
      freezeArea, // 冷藏库
      atmosphereArea, // 气调库
    } = compStorageCaRef.current;
    // otherObj 是必填的项
    let otherObj = {
      ...compProfileRef.current,
      ...InduTypeRef.current,
      ...compConnInfoRef.current,
      ownVehicle,
      cooperativeVehicle,
      transportCategory,
      totalArea,
      storeCategory,
    };
    if (flag) {
      Toast.info('不可重复提交', 1);
    }
    // 验证必填信息
    if (Object.values(otherObj).some(item => item === '')) {
      Toast.info('请填写完整信息', 1);
      return;
    }
    if (
      transportCategory.split(',').includes('01') &&
      (natTransportType === '' || natVehicle === '')
    ) {
      Toast.info('请完善常温运输必填项', 1);
      return;
    }
    if (
      transportCategory.split(',').includes('02') &&
      (coldTransportType === '' || coldVehicle === '')
    ) {
      Toast.info('请完善冷藏运输必填项', 1);
      return;
    }
    if (
      storeCategory.split(',').includes('01') &&
      (natStoreType === '' || natVehicle === '')
    ) {
      Toast.info('请完善常温仓储必填项', 1);
      return;
    }
    if (
      storeCategory.split(',').includes('02') &&
      (coldStoreType === '' ||
        coldArea === '' ||
        freezeArea === '' ||
        atmosphereArea === '')
    ) {
      Toast.info('请完善常温仓储必填项', 1);
      return;
    }
    setFlag(true);
    const res = await addWlqy({
      ...compProfileRef.current,
      ...InduTypeRef.current,
      ...compTranCaRef.current,
      ...compStorageCaRef.current,
      ...compConnInfoRef.current,
      status: 1,
    });
    if (res.code === 0) {
      Toast.info(res.msg, 1);
      setTimeout(() => {
        history.push('/');
      }, 1000);
    } else {
      setFlag(false);
    }
  }
  return (
    <div className="logiEntp">
      <SelfHead title={'物流企业填报'} />
      <List className="self-list">
        <span className="self-title">企业概况</span>
        <CompProfileRef ref={compProfileRef} />
        <span className="self-title">行业类别</span>
        <IndTypeRef ref={InduTypeRef} />
        <span className="self-title">企业运输能力</span>
        <CompTranCaRef ref={compTranCaRef} />
        <span className="self-title">企业仓储能力</span>
        <CompStorageCaRef ref={compStorageCaRef} />
        <span className="self-title">企业联系信息</span>
        <CompConnInfoRef ref={compConnInfoRef} />
      </List>
      <div className="btn">
        <Button type="primary" onClick={submitData}>
          提交
        </Button>
      </div>
    </div>
  );
}

export default LogiEntp;
